<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p :title="text">吧鼠标放在我上面</p>
    <input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女
    <p>{{sex}}</p>
    <p v-if="1==2">A</p>
    <p v-else-if="0">b</p>
    <p v-else>else</p>

    <select v-model="selected">
        <option disabled>---请选择---</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <p>{{selected}}</p>

    第一个：<input type="text" v-model="fristN">
    第二个：<input type="text" v-model="secondN">
    和：<input type="text" v-model="fsN">
    和：<input type="text" v-model="fsG">
</div>


<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            sex: '',
            text: '我是鼠标放上去显示的内容',
            selected: '',
            fristN: 'A',
            secondN: 'B'
        },
        computed: {
            fsN() {
                return this.fristN + ' ' + this.secondN
            },
            fsG: {
                get() {
                    return this.fristN + ' ' + this.secondN
                },
                set(value) {
                    const sv = value.split(' ')
                    this.fristN = sv[0]
                    this.secondN = sv[1]
                }
            }
        }
    })
</script>
</body>
</html>